<template>
  <div class="box">
    <!-- <div class="list">
        <div v-for="item in demoList" :key="item.chartType" class="demo">
            <div @drag="drag" @dragend="dragend(item)" class="droppable-element" draggable="true"
                unselectable="on">
                <Chart :config="item"/>
            </div>
        </div>
    </div> -->
    <div class="list">
        <div v-for="item in demoList" :key="item.chartType" unselectable="on" class="demo droppable-element"
            draggable="true" @drag="drag" @dragend="dragend(item)">
                <div class="imgbox">
                    <img :src="item.src" alt="">
                </div>
                <p class="typeName">{{nameMap[item.chartType]}}</p>
        </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import Options from '../../../components/Echart/demoOptions.js';
const W = 4;
const H = 10;
let mouseXY = {"x": null, "y": null};
let DragPos = {"x": null, "y": null, "w": W, "h": H, "i": null};
export default {
    data(){
        return {
            nameMap: {
                top: '横向柱状图',
                bar: '柱状图',
                line: '折线图',
                pie: '饼图',
                card: '卡片',
                table: '表格',
            },
            demoList: [
                {
                    demoOption: Options.top, // 模拟数据
                    chartType: 'top',
                    name: "未定义图表",
                    database: '',
                    theme: 'dark', // 默认dark主题
                    src: '/images/chartsIcon/topIcon.png'
                },
                {
                    demoOption: Options.bar, // 模拟数据
                    chartType: 'bar',
                    name: "未定义图表",
                    database: '',
                    theme: 'dark', // 默认dark主题
                    src: '/images/chartsIcon/barIcon.png'
                },
                {
                    demoOption: Options.pie, // 模拟数据
                    chartType: 'pie',
                    name: "未定义图表",
                    database: '',
                    theme: 'dark', // 默认dark主题
                    src: '/images/chartsIcon/pieIcon.png'
                },
                {
                    demoOption: Options.line, // 模拟数据
                    chartType: 'line',
                    name: "未定义图表",
                    database: '',
                    theme: 'dark', // 默认dark主题
                    src: '/images/chartsIcon/lineIcon.png'
                },
                {
                    demoOption: Options.table, // 模拟数据
                    chartType: 'table',
                    name: "未定义图表",
                    database: '',
                    theme: 'dark', // 默认dark主题
                    src: '/images/chartsIcon/lineIcon.png'
                },
                {
                    demoOption: Options.card, // 模拟数据
                    chartType: 'card',
                    name: "未定义图表",
                    database: '',
                    theme: 'dark', // 默认dark主题
                    src: '/images/chartsIcon/lineIcon.png'
                },
            ],
        };
    },
    computed: {
        ...mapGetters(['gridlayoutGet', 'layoutGet'])
    },
    mounted(){
        document.addEventListener("dragover", (e) => {
            mouseXY.x = e.clientX;
            mouseXY.y = e.clientY;
        }, false);
    },
    methods: {
        drag () {
            let parentRect = document.getElementById('content').getBoundingClientRect();
            let mouseInGrid = false;
            if (((mouseXY.x > parentRect.left) && (mouseXY.x < parentRect.right)) && ((mouseXY.y > parentRect.top) && (mouseXY.y < parentRect.bottom))) {
                mouseInGrid = true;
            }
            if (mouseInGrid === true && (this.$store.state.layout.findIndex(item => item.i === 'drop')) === -1) {
                this.$store.state.layout.push({
                    x: 0,
                    y: 0,
                    w: W,
                    h: H,
                    i: 'drop',
                    config:{
                        demoOption: {option:{}}, // 模拟数据
                        chartType: '',
                        name: "未定义图表",
                        database: '',
                        theme: 'dark' // 默认dark主题
                    }
                });
            }
            let index = this.$store.state.layout.findIndex(item => item.i === 'drop');
            if (index !== -1) {
                try {
                    this.gridlayoutGet.$children[this.$store.state.layout.length].$refs.item.style.display = "none";
                } catch {
                    console.log('try-catch');
                }
                let el = this.gridlayoutGet.$children[index];
                el.dragging = {"top": mouseXY.y - parentRect.top, "left": mouseXY.x - parentRect.left};
                let new_pos = el.calcXY(mouseXY.y - parentRect.top, mouseXY.x - parentRect.left);
                if (mouseInGrid === true) {
                    this.gridlayoutGet.dragEvent('dragstart', 'drop', new_pos.x, new_pos.y, H, W);
                    DragPos.i = String(index);
                    DragPos.x = this.$store.state.layout[index].x;
                    DragPos.y = this.$store.state.layout[index].y;
                }
                if (mouseInGrid === false) {
                    this.gridlayoutGet.dragEvent('dragend', 'drop', new_pos.x, new_pos.y, H, W);
                    this.$store.state.layout = this.$store.state.layout.filter(obj => obj.i !== 'drop');
                }
            }
        },
        dragend (item) {
            let parentRect = document.getElementById('content').getBoundingClientRect();
            let mouseInGrid = false;
            if (((mouseXY.x > parentRect.left) && (mouseXY.x < parentRect.right)) && ((mouseXY.y > parentRect.top) && (mouseXY.y < parentRect.bottom))) {
                mouseInGrid = true;
            }
            if (mouseInGrid === true) {
                // alert(`Dropped element props:\n${JSON.stringify(DragPos, ['x', 'y', 'w', 'h', 'i'], 2)}`);
                this.gridlayoutGet.dragEvent('dragend', 'drop', DragPos.x, DragPos.y, W, H);
                const newArr = this.$store.state.layout.filter(obj => obj.i !== 'drop');
                // let data = JSON.parse(JSON.stringify(item));
                // data.title = `${item.title}(${DragPos.i})`;
                // const config = {
                //     chartType: data.chartType,
                //     name: '未定义图表',
                //     data,
                // };
                const time = new Date();
                const I = String(time.getTime());
                newArr.push({
                    x: DragPos.x,
                    y: DragPos.y,
                    w: W,
                    h: H,
                    i: I,
                    config: item
                });
                this.$store.state.layout = newArr;
                this.gridlayoutGet.dragEvent('dragend', DragPos.i, DragPos.x,DragPos.y,W,H);
                console.log('Layout:',newArr);
                try {
                    this.gridlayoutGet.$children[this.$store.state.layout.length].$refs.item.style.display="block";
                } catch {
                    console.log(222);
                }
            }
        },
    }
};
</script>

<style lang="scss" scoped>
.title{
    height: 20px;
}
.list{
    margin-top: 10px;
    height: calc(100% - 20px);
    overflow: auto;
    .demo{
        box-sizing: border-box;
        height: 50px;
        width: calc(100% - 40px);
        margin: 10px 20px;
        text-align: left;
        border-bottom: 1px solid white;
        cursor: move;
        display: flex;
        align-items: center;
        img{
            width: 60px;
            height: 55px;
            display: inline-block;
		
        }
        .typeName{
            font-size: 1.5rem;
            padding-left: 10px;
        }
    }
}
</style>
<style scoped>
.droppable-element {
    width: 150px;
    height: 100%;
    text-align: center;
    /* border: 1px solid black; */
    /* margin: 10px 0;
    padding: 10px; */
}
.vue-grid-layout {
    background: #eee;
}
.vue-grid-item:not(.vue-grid-placeholder) {
    background: #ccc;
    border: 1px solid black;
}
.vue-grid-item .resizing {
    opacity: 0.9;
}
.vue-grid-item .static {
    background: #cce;
}
.vue-grid-item .text {
    font-size: 24px;
    text-align: center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 100%;
    width: 100%;
}
.vue-grid-item .no-drag {
    height: 100%;
    width: 100%;
}
.vue-grid-item .minMax {
    font-size: 12px;
}
.vue-grid-item .add {
    cursor: pointer;
}
.vue-draggable-handle {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 0;
    left: 0;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='#999999'/></svg>") no-repeat;
    background-position: bottom right;
    padding: 0 8px 8px 0;
    background-repeat: no-repeat;
    background-origin: content-box;
    box-sizing: border-box;
    cursor: pointer;
}
.layoutJSON {
    background: #ddd;
    border: 1px solid black;
    margin-top: 10px;
    padding: 10px;
}
.layoutJSON {
    background: #ddd;
    border: 1px solid black;
    margin-top: 10px;
    padding: 10px;
}
.columns {
    -moz-columns: 120px;
    -webkit-columns: 120px;
    columns: 120px;
}
</style>